<template>
  <div id="upLoadImage">
    <div class="pic-up" :style="{height:`${height+'px'}`,width:`${height+'px'}`}">
      <el-image
        v-if="v.img==''"
        :style="{height:`${height+'px'}`,width:`${height+'px'}`}"
        :src="img"
        fit="cover"
      ></el-image>
      <video
        :style="{height:`${height+'px'}`,width:`${height+'px'}`}"
        v-if="v.img!=''"
        :src="v.img"
      ></video>
      <span
        @click="openUp"
        :style="{width:`${height+'px'}`}"
        class="pic-select"
      >{{v.img==''?'上传':'选择'}}</span>
      <i @click="deleteImage" v-if="v.img!=''" class="el-icon-error pic-delete"></i>
    </div>

    <up ref="upData" @getImage="getImage"></up>
  </div>
</template>

<script>
import up from "./up";
export default {
  name: "upLoadImage",
  data() {
    return {
      img: require("../../assets/img/add.png"),
    };
  },
  props: ["v", "height", "icon"],
  components: {
    up,
  },
  computed: {},
  created() {},
  methods: {
    getImage(img) {
      this.v.img = img;
    },
    openUp() {
      this.$refs["upData"].isShown = true;
      this.$refs["upData"].getCategory();
      this.$refs["upData"].getPicNumber();
    },
    deleteImage() {
      this.v.img = "";
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../assets/css/base.less");
#upLoadImage {
  .pic-up:hover {
    > .pic-select,
    > .pic-delete {
      display: block;
    }
  }
  .pic-up {
    border: 1px solid #eee;
    position: relative;
    overflow: hidden;
    > .pic-select {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      text-align: center;
      background-color: rgba(0, 0, 0, 0.7);
      color: #fff;
      font-size: 12px;
      display: none;
      cursor: pointer;
    }
    > .pic-delete {
      position: absolute;
      top: -2px;
      right: -2px;
      font-size: 20px;
      display: none;
    }
  }
}
</style>
